<template>
  <view class="list flex-column">
    <view class="num-container flex-row">
      <text @click="paste(item.num)">订单号：{{num}}</text>
      <text class="text-red" v-if="item.state!='2'" @click="confirmOrderCompleted">确定咨询完成</text>
      <text class="text-red" v-else >订单已完成</text>
    </view>
    <view class="top flex-row">
      <u-avatar :src="item.avatar" size="68"></u-avatar>
      <view class="flex-column right">
        <view class="flex-row title-container">
          <text class="title">{{ item.consultingName }}</text>
          <text class="status text-red">{{item.orderTime}}</text>
        </view>
        <text class="time">下单人：{{ item.userName }}</text>
        <text class="time">联系方式：{{ item.fillInPhone }}</text>

      </view>
    </view>
    <view class="flex-row bottom">
      <view class="btn-container flex-row">
        <button type="default"  :class="textBtnDisabled?'btn btn-right btn-disabled':'btn btn-right'" @click="showText" :disabled="textBtnDisabled" >
         查看文字资料
        </button>
        <button type="default"  :class="imgBtnDisabled?'btn btn-right btn-disabled':'btn btn-right'" @click="showImg" :disabled="imgBtnDisabled" >查看图片材料</button>
        <button type="default"  class="btn btn-right" @click="call">电话联系当事人
        </button>
      </view>
    </view>
    <u-popup :show="textShow" @close="closeText" mode="center" :round="10">
      <view class="text-container-poup">
       <text>{{item.supplement}}</text>
      </view>
    </u-popup>
    <u-popup :show="imgShow" @close="closeImg" mode="center" :round="10">
      <view class="img-container-poup">
        <view class="img-container" v-for="(itemImg,index) in item.imgList" :key="index">
          <image :src="itemImg" mode="widthFix" @click="imgListPreview(index)"/>
        </view>

      </view>
    </u-popup>
  </view>
</template>

<script>

import {isEmptyString} from "@/utils/common";

export default {
  name: "lawOrderItem",
  props: {
    // 订单信息
    item: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      textShow: false,
      imgShow: false,
    };
  },
  computed:{
    //订单号只取前面的九个，剩下的用...代替
    num(){
      return this.item.num.substring(0,9)+'...'
    },
    //查看文字资料按钮是否禁用
    textBtnDisabled(){
      if(isEmptyString(this.item.supplement)){
        return  true
      }else{
        return false
      }
    },
    //查看图片资料按钮是否禁用
    imgBtnDisabled(){
      if(this.item.imgList.length==0){
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    //复制订单号
    paste(num) {
      uni.setClipboardData({
        data: num,
        success: function () {
          uni.showToast({
            title: '订单号复制成功'
          });
        }
      });
    },
   //电话联系当事人
    call(){
      uni.makePhoneCall({
        phoneNumber: this.item.fillInPhone
      });
    },
    //查看文字资料
    showText(){
      this.textShow=true;
    },
    closeText(){
      this.textShow=false;
    },
    showImg(){
      this.imgShow=true;
    },
    closeImg(){
      this.imgShow=false;
    },
    imgListPreview(index){
      this.imgShow=false;
      uni.previewImage({
        current: index,
        indicator:"number",
        loop:true,
        urls: this.item.imgList,
      })
    },
    //确定咨询完成
    confirmOrderCompleted(){
      uni.showModal({
        title: '提示',
        content: '确定咨询完成？',
        success: (res) => {
          if (res.confirm) {
             this.$store.dispatch('UpdateLawyerOrder',{
               orderId:this.item.id,
               orderState:'2'
             }).then(res=>{
                 this.$emit('confirmOrderCompleted')
             })
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.list {
  padding: 1rem;
  background-color: #FFFFFF;
  margin-top: 0.1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;
  .num-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #c5c5c5;
  }

  .top {
    padding-top: 1rem;
    .right {
      width: 100%;
      padding-left: 2rem;
      min-height: 4rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .title-container {

        justify-content: space-between;

        .title {
          font-size: 0.8rem;
          color: black;
        }

        .status {
          font-size: 0.8rem;
          color:#e54d42;
          margin-left: 0.5rem;
        }
      }

      .time {
        font-size: 0.6rem;
        color: #999999;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
      }

      .flex-row-end {
        justify-content: flex-end;
        align-items: center;

        text {
          font-size: 0.6rem;
          color: gray;
        }

        .price {
          font-size: 1rem;
          color: #e43d00;
          margin-left: 0.5rem;
        }
      }

    }
  }

  .middle {
    width: fit-content;
    padding-bottom: 0.5rem;
  }

  .bottom {
    justify-content: space-between;
    align-items: center;
    padding-top: 0.5rem;

    .orderId {
      font-size: 0.7rem;
      color: #999999;
    }

    .btn-container {
      width: 100%;
      justify-content: space-between;
      .btn {
        background-color: rgba(0, 0, 0, 0);
        line-height: normal;
        padding: 5px;
        font-size: 0.8rem;
      }


      .btn-right {
        box-sizing: border-box;
        border: 1px solid #999999;
        color: #222;
      }
      .btn-disabled{
        box-sizing: border-box;
        border: 1px solid #999999;
        color: #999999;
      }
    }
  }
  .text-container-poup{
    width: 600rpx;
    height: 600rpx;
    padding: 2rem;
    overflow-y: scroll;
  }
  .img-container-poup{
    width: 600rpx;
    height: 600rpx;
    padding: 2rem;
    overflow-y: scroll;
  }
}
</style>